<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<view class="shop_data_title">
			<view class="icon-views icon iconfont icon-tongjibaobiao"></view>
			<view class="fb">数据概况</view>
		</view>
		<template v-if="!loadding">
			<view class="shop_data" style="margin-top: 0;">
				<view class="group-title">今日成交量</view>
				<view class="d-s-c  deal-list">
					<view class="deal_item d-c  d-c-c">
						<view class="item-num">{{order.order_total_price.today}}</view>
						<view class="f26 gray9">成交额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item-num">{{order.order_per_price.today}}</view>
						<view class="f26 gray9">客单价</view>
					</view>
					<view class="deal_item d-c d-c-c">
						<view class="item-num">{{order.order_total.today}}</view>
						<view class="f26 gray9">付款订单</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item-num">{{order.order_user_total.today}}</view>
						<view class="f26 gray9">付款人数</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item-num">{{order.order_refund_money.today}}</view>
						<view class="f26 gray9">成功退款金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item-num">{{order.order_refund_total.today}}</view>
						<view class="f26 gray9">退款订单</view>
					</view>
				</view>
			</view>
			<view class="shop_data">
				<view class="group-title">今日访问量</view>
				<view class="visit">
					<view class="d-a-c visit_list">
						<view class="visit_item d-c d-c-c">
							<view class="item-num">{{visit.fav_store.today}}</view>
							<view class="f26 gray9">商户收藏</view>
						</view>
						<view class="visit_item d-c d-c-c">
							<view class="item-num">{{visit.fav_product.today}}</view>
							<view class="f26 gray9">商品收藏</view>
						</view>
						<view class="visit_item d-c d-c-c">
							<view class="item-num">{{visit.visit_user.today}}</view>
							<view class="f26 gray9">访客数</view>
						</view>
						<view class="visit_item d-c d-c-c">
							<view class="item-num">{{visit.visit_total.today}}</view>
							<view class="f26 gray9">访问量</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="shop_data_title">
			<view class="icon-views icon iconfont icon-dingdan2"></view>
			<view class="fb">订单结算</view>
		</view>
		<view class="shop_data" style="margin-top: 0;">
			<view v-for="(item,index) in orderList" :key="index" class="data-item" @click="todetail(item.settled_id)">
				<view class="d-b-c mb20">
					<view class="gray9">订单编号：<text class="gray3">{{item.orderMaster.order_no}}</text></view>
					<text class="icon iconfont icon-jiantou1"></text>
				</view>
				<view class="d-b-c">
					<view class="gray9">支付金额：<text class="gray3">{{item.pay_money}}</text></view>
					<view class="gray9">结算金额：<text class="gray3">{{item.supplier_money}}</text>
					</view>
				</view>
			</view>
			<!-- 没有记录 -->
			<view class="d-c-c p30" v-if="orderList.length==0 && !loadding">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关记录哦</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		data() {
			return {
				order: {},
				visit: {},
				orderList: [],
				/*底部加载*/
				loadding: true,
				/*没有更多*/
				no_more: false,
				/*当前页面*/
				page: 1,
				last_page: 0
			}
		},
		components: {
			uniLoadMore
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loadding) {
					return 1;
				} else {
					if (this.orderList.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			/*可滚动视图区域到底触发*/
			onReachBottom() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			},
			//获取数据列表
			getData(e) {
				let self = this;
				let page = self.page;
				self.loadding = true;
				uni.showLoading({
					title: '加载中'
				})
				self._post('supplier.index/storedata', {
					page: page || 1
				}, (res) => {
					self.order = res.data.order;
					self.orderList = self.orderList.concat(res.data.ordersettle.data);
					self.visit = res.data.visit;
					self.last_page = res.data.ordersettle.last_page;
					if (res.data.ordersettle.last_page <= 1) {
						self.no_more = true;
					} else {
						self.no_more = false;
					}
					self.loadding = false;
					uni.hideLoading()
				})
			},
			todetail(id) {
				this.gotoPage('/pages/user/my_shop/my_shop_detail?settled_id=' + id);
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop_data {
		width: 710rpx;
		padding: 0 23rpx;
		background-color: white;
		margin: 0 auto;
		margin-top: 22rpx;
		box-sizing: border-box;
		border-radius: 25rpx;
		color: #585858;
	}

	.shop_data_title {
		height: 112rpx;
		padding: 0 23rpx;
		font-size: 30rpx;
		/* margin-bottom: 50rpx; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.group-title {
		height: 80rpx;
		line-height: 80rpx;
		color: #333;
		border-bottom: 1px solid #eee;
		font-size: 26rpx;
	}

	.visit {
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.deal-list {
		flex-wrap: wrap;
		padding-bottom: 20rpx;
	}

	.deal_item {
		width: 33%;
		margin: 20rpx 0;
	}

	.item-num {
		margin-bottom: 10rpx;
		color: #333;
		font-size: 32rpx;
	}

	.datalist-name {
		/* text-align: center; */
	}

	.data-item {
		border-bottom: 1rpx solid #eee;
		padding: 26rpx 0rpx;
		font-size: 26rpx;
	}

	.icon-views {
		width: 58rpx;
		height: 58rpx;
		background: #FF5704;
		@include background_color('background_color');
		border-radius: 50%;
		margin-right: 12rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.data-item .icon.iconfont {
		font-size: 24rpx;
		color: #999;
	}
</style>